<style>
body {
  width: 90%;
  max-width: 900px;
  margin: 1em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
.container {
  /* 使用网格布局，定义网格的列比重 */
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;

  /* 使用区域模板进行定义 */
  grid-template-areas:
    "header header ."
    "sidebar content ."
    "footer footer footer";
  gap: 20px;
}
header {
  grid-area: header;
}
article {
  grid-area: content;
}
aside {
  grid-area: sidebar;
}
footer {
  grid-area: footer;
}
header,
footer {
  border-radius: 5px;
  padding: 5px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
aside {
  border-right: 1px solid #999;
}
</style>
<div class="container">
  <header>This is WeiyiGeek's blog</header>
  <article>
    <h1>如何修炼成为全栈工程师？</h1>
    <p>
      本页记录了博主（WeiyiGeek）个人在初识计算机技术到从业过程中学习的路径，包括在此学习、工作过程中学习的计算机基础知识、网络工程师、开发程序员、运维工程师以及物联网硬件等相关学习资料（书籍、视频）总结而出的学习之路笔记，并按类别进行分别整理归纳汇总，方便后续回顾学习以及帮助后来学习的朋友做一个学习参考，希望能对各位读者朋友们的学习有帮助, 有成长。
    </p>
    <p>
      相关学习书籍以及视频推荐，请访问如下book站点查阅（持续更新中）：https://blog.weiyigeek.top/books/
    </p>
  </article>

  <aside>
    <h2>学习交流</h2>
    <p>
      欢迎各位朋友关注我的微信公众号【WeiyiGeek】以及微信小程序【极客全栈修炼】，以及欢迎同道中人加入到小白到大神学习交流群( https://weiyigeek.top/visit.html )。
    </p>
  </aside>
  <footer>
    原文作者: WeiyiGeek [https://weiyigeek.top]<br>
    转载注明出处，原文地址：https://blog.weiyigeek.top/2018/1-1-1.html<br>
    更多最新文章, 请关注我的微信公众账号【WeiyiGeek】或者【B站专栏】哟, 谢谢支持！(๑′ᴗ‵๑) ❤<br>
</footer>
</div>
